<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Aizen
  Date: 2021/11/30
  Time: 10:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花礼网后台管理系统-用户列表</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/"/>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/laydate/laydate.js"></script>
    <script src="js/userList.js"></script>
    <link rel="stylesheet" href="css/Top.css">
    <link rel="stylesheet" href="css/Left.css">
    <link rel="stylesheet" href="css/userList.css">
</head>
<body>

<div class="container-fluid">

    <div class="row">
        <div class="col-md-2">
            <%@include file="Left.jsp" %>
        </div>
        <div class="col-md-10 col-md-offset-2">
            <%@include file="Top.jsp" %>
        </div>
        <div class="col-md-10 col-md-offset-2">

            <div id="zhezhao"></div>

            <div id="ban" hidden="hidden">
                <form>
                    <p id="banp">封禁原因</p>
                    <textarea class="form-control" name="" id="bantext" rows="9"></textarea><br>
                    <button type="submit" id="tijiao" class="btn btn-default">提交</button>
                    <button type="button" id="quxiao" class="btn btn-default">取消</button>
                </form>
            </div>

            <%--            模糊查询--%>
            <form class="form-inline" action="manager/userListServlet" method="post">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" name="name" value="${sessionScope.name}" class="form-control" id="userName"
                           placeholder="支持模糊查询">
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <select class="form-control" name="sex">
                        <option value="">全部</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>手机号</label>
                    <input type="text" name="phone" value="${sessionScope.phone}" class="form-control" id="userPhone">
                </div>
                <div class="form-group">
                    <label>注册日期</label>
                    <input type="text" value="${sessionScope.date}" width="100" name="date" id="addDate"
                           placeholder="请选择注册日期" height="25" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>状态</label>
                    <select class="form-control" name="state">
                        <option value="">全部</option>
                        <option value="true">正常</option>
                        <option value="false">封禁</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">查询</button>
            </form>


            <%--            查询的用户数据--%>
            <table class="table table-hover">
                <th>编号</th>
                <th>用户名</th>
<%--                <th>密码</th>--%>
                <th>性别</th>
                <th>电话</th>
                <th>生日</th>
                <th>邮箱</th>
                <th>状态</th>
                <th>注册日期</th>
                <c:forEach items="${sessionScope.userPageInfo.list}" var="u">
                    <tr>
                        <td>${u.id}</td>
                        <td>${u.name}</td>
<%--                        <td>${u.pwd}</td>--%>
                        <c:if test="${u.sex==null}" var="sexf">
                            <td>未设置</td>
                        </c:if>
                        <c:if test="${!sexf}">
                            <td>${u.sex}</td>
                        </c:if>
                        <td>${u.phone}</td>

                        <c:if test="${u.birthday==null}" var="birthdayf">
                            <td>未设置</td>
                        </c:if>
                        <c:if test="${!birthdayf}">
                            <td>${u.birthday}</td>
                        </c:if>

                        <c:if test="${u.email==null}" var="emailf">
                            <td>未设置</td>
                        </c:if>
                        <c:if test="${!emailf}">
                            <td>${u.email}</td>
                        </c:if>

                        <td>
                            <a href="javascript:void(0);" class="state" data-uid="${u.id}">${u.state?"正常":"封禁"}</a></td>
                        <td>${u.logindatestr}</td>
                    </tr>
                </c:forEach>
            </table>

<%--            分页数据--%>
            <div class="box">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <c:set var="up" value="${sessionScope.userPageInfo}"></c:set>
                        <li>
                            <a href="manager/userListServlet?pageNo=${up.prePage<1?1:p.prePage}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="manager/userListServlet?pageNo=1">首页</a></li>
                        <c:forEach items="${up.navigatepageNums}" var="i">
                            <c:if test="${i==up.pageNum}" var="f">
                                <li class="active"><a href="manager/userListServlet?pageNo=${i}">${i}</a></li>
                            </c:if>
                            <c:if test="${!f}">
                                <li><a href="manager/userListServlet?pageNo=${i}">${i}</a></li>
                            </c:if>
                        </c:forEach>
                        <li><a href="manager/userListServlet?pageNo=${up.pages}">末页</a></li>
                        <li>
                            <a href="manager/userListServlet?pageNo=${up.nextPage==0?up.pages:up.nextPage}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        共${up.total}条数据，共${up.pages}页
                    </ul>
                </nav>
            </div>





        </div>
    </div>
</div>


</body>
<script>
    $(function () {
        //左侧用户列表变红
        $("#ul li:nth-child(2) a").css("color", "red");
        //改变文字为用户列表
        $("#let").html("用户列表");
        //隐藏封禁框子
        $("#zhezhao").hide();
        $("#ban").hide();
        //保存性别与状态的模糊查询条件
        $("[name='sex']").val("${sessionScope.sex}");
        $("[name='state']").val("${sessionScope.state}");

        //封禁提交事件
        $("#tijiao").click(function () {
            todo();//封禁
            //封禁记录——待完善---------------------------------------
            //关闭显示
            $("#zhezhao").hide();
            $("#ban").hide();
            return false;
        })

        //取消封禁
        $("#quxiao").click(function () {
            $("#zhezhao").hide();
            $("#ban").hide();
        })


        let ele = null;
        var uid = null;
        //状态点击事件
        $(".state").click(function () {
            ele = $(this);
            uid = $(this).attr("data-uid");
            if ($(this).html() == "正常") {
                $("#zhezhao").show();
                $("#ban").show();
            } else {
                if (confirm("确认解封吗？")) {
                    todo();
                }
            }
        })

        //提交封禁信息
        function todo() {
            $.post("manager/userStateServlet", {uid}, function (flag) {
                if (flag == "true") {
                    if ($(ele).html() == "正常") {
                        $(ele).html("封禁");
                    } else {
                        $(ele).html("正常");
                    }
                }
            });
        }


    })
</script>
</html>
